<template>
  <div class="os-charts-card">
    <div class="os-charts-card__header">
      <div class="card-title">{{title}}</div>
      <div class="card-right"
           title="拷贝option">
        <el-popover placement="bottom"
                    :width="80"
                    trigger="click"
                    :auto-close="2500"
                    :show-after="300"
                    :show-arrow="false"
                    popper-class="os-copy-text">
          <div class="copy-text"><i class="el-alert__icon el-icon-success"></i>复制成功！</div>
          <template #reference>
            <i class="iconfont icon-code"
               @click="copyChartOption"></i>
          </template>
        </el-popover>
      </div>
    </div>
    <slot />
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue'

  export default defineComponent({
    name: 'os-charts-card',
    props: {
      title: {
        type: String,
        default: '',
      },
      name: {
        type: String,
        default: '',
      },
    },
    setup(props, { emit }) {
      const copyChartOption = () => {
        emit('copy-chart-option', props.name)
      }
      return { copyChartOption }
    },
  })
</script>

<style lang="scss" scoped>
  @include b(charts-card) {
    background: $--color-card-bg;
    width: 450px;
    height: 280px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px $--color-card-bg;
    margin: 8px;

    @include e(header) {
      padding: 18px 20px;
      border-bottom: 1px solid $--color-not-active;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      .card-title {
        font-size: 14px;
      }
      .card-right {
        text-align: right;
        cursor: pointer;
        &:hover {
          color: $--color-hover;
        }
        &:active {
          color: $--color-not-active;
        }
      }
    }
  }
</style>
<style lang="scss">
  .os-copy-text {
    background: $--color-jb3 !important;
    box-shadow: 0 2px 12px 0 $--color-card-bg !important;
    border: 0px !important;
  }
  .copy-text {
    color: $--color-success;
    text-align: center;
    i {
      margin-right: 8px;
    }
  }
</style>